<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .div1{
            width: 13.98rem;
            height: 1.5rem;
            background-color: rgb(185,27,52);
            padding: 0.78rem 0.5rem 0.26rem 0.52rem;
            overflow: hidden;
            position: relative;
        }
        .img1{
            width: 0.62rem;
            height: 1.5rem;
            float: left;
        }
        .d1{
            width: 10.8rem;
            height: 1.16rem;
            margin: 0.34rem 1.7rem 0 1.48rem;
            border-radius: 0.1rem;
            position: absolute;
            background-color: rgb(238,238,238);
            float: left;
        }
        .img2{
            width: 0.52rem;
            height: 0.5rem;
            margin: 0.36rem 0 0.3rem 0.7rem;
        }
        .s1{
            width: 1.38rem;
	        height: 0.56rem;
	        font-family: STXihei;
	        font-size: 0.6rem;
	        font-weight: normal;
	        font-stretch: normal;
	        line-height: 0.4rem;
	        letter-spacing: 0rem;
	        color: #b3b3b3;
            position: absolute;
            top: 0.40rem;
            left: 1.48rem;
            /* margin: 0.3rem 8.14rem 0.3rem 0; */
        }
        .s2{
            width: 0.96rem;
	        height: 0.44rem;
	        font-family: STXihei;
	        font-size: 0.48rem;
	        font-weight: normal;
	        font-stretch: normal;
	        line-height: 0.4rem;
	        letter-spacing: 0rem;
	        color: #ffffff;
            margin: 0.64rem 0 0.42rem 0;
            float: right;
        }

        .img3{
            width: 15rem;
            height: 6rem;
        }

        .content{
            width: 15rem;
            height: 48.5rem;
            background-color: #f9f9f9;
        }

        .div2{
            width: 15rem;
            height: 3.12rem;
            overflow: hidden;
            background-color: rgb(249,249,249);
        }
        .d2{
            width: 2.22rem;
            height: 2.24rem;
            background-color: #ffffff;
            border-radius: 50%;
            margin: 0.68rem 0.34rem 0 0.94rem;
            float: left;
            overflow: hidden;
        }
        .img5{
            width:1.42rem;
            height: 0.56rem;
            margin-top: 0.42rem;
            margin-left: 0.46rem;
            margin-bottom: 0.20rem;
        }
        .img4{
            width:1.12rem;
            height: 0.68rem;
            margin-top: 0.42rem;
            margin-left: 0.56rem;
            margin-bottom: 0.10rem;
        }
        .img6{
            width:1.44rem;
            height: 0.48rem;
            margin-top: 0.42rem;
            margin-left: 0.48rem;
            margin-bottom: 0.24rem;
        }
        .d002{
            width: 1.62rem;
	        height: 0.36rem;
	        font-family: STXihei;
	        font-size: 0.4rem;
	        font-weight: normal;
	        font-stretch: normal;
	        line-height: 0.48rem;
	        letter-spacing: 0rem;
	        color: #333333;
            margin-left: 0.30rem;
        }

        .div3{
            width: 13.04rem;
            height: 0.52rem;
            margin: 0.64rem 0 0.42rem 0.98rem;
            overflow: hidden;
        }
        .d3{
            width: 4.92rem;
	        height: 0.02rem;
	        background-color: #cccccc;
	        opacity: 0.7;
            margin-top: 0.22rem;
            float: left;
        }
        .d4{
            width: 2.3rem;
	        height: 0.6rem;
	        font-family: STXihei;
	        font-size: 0.56rem;
	        font-weight: normal;
	        font-stretch: normal;
	        line-height: 0.6rem;
	        letter-spacing: 0rem;
	        color: #666666;
            margin: 0 0.45rem;
            float: left;
        }

        .div4{
            width: 8.74rem;
            height: 4rem;
            margin-left: 0.52rem;
            position: relative;
            float: left;
        }
        .img7{
            width: 8.74rem;
            height: 4rem;
        }
        .d5{
            width: 2.98rem;
	        height: 0.76rem;
	        font-family: PingFangSC-Regular;
	        font-size: 0.75rem;
	        font-weight: normal;
	        font-stretch: normal;
	        line-height: 0.29rem;
	        letter-spacing: -0.04rem;
	        color: #000000;
            position: absolute;
            left: 0.9rem;
            top: 0.92rem;
        }
        .d6{
            width: 2.46rem;
	        height: 0.46rem;
	        font-family: PingFangSC-Light;
	        font-size: 0.44rem;
	        font-weight: normal;
	        font-stretch: normal;
	        line-height: 0.52rem;
	        letter-spacing: 0.02rem;
	        color: #000000;
            position: absolute;
            top: 1.92rem;
            left: 0.95rem;
        }
        .d7{
            width: 2.5rem;
	        height: 0.6rem;
	        font-family: PingFangSC-Medium;
	        font-size: 0.55rem;
	        font-weight: normal;
	        font-stretch: normal;
	        line-height: 0.52rem;
	        letter-spacing: 0.03rem;
	        color: #e43643;
            position: absolute;
            top: 2.76rem;
            left: 0.92rem;
        }

        .div5{
            width: 5.05rem;
            height: 4rem;
            margin-left: 0.22rem;
            position: relative;
            float: left;
        }
        .img8{
            width: 5.05rem;
            height: 4rem;
        }
        .d8{
            width: 2.52rem;
	        height: 0.36rem;
	        font-family: PingFangSC-Light;
	        font-size: 0.36rem;
	        font-weight: normal;
	        font-stretch: normal;
	        line-height: 0.48rem;
	        letter-spacing: 0rem;
	        color: #000000;
            position: absolute;
            top: 2.88rem;
            left: 1.24rem;
        }
        .d9{
            width: 1.18rem;
	        height: 0.36rem;
	        font-family: PingFangSC-Medium;
	        font-size: 0.4rem;
	        font-weight: normal;
	        font-stretch: normal;
	        line-height: 0.48rem;
	        letter-spacing: 0rem;
	        color: #e43643;
            position: absolute;
            top: 3.42rem;
            left: 1.98rem;
        }

        .div6{
            width: 14rem;
            height: 21.1rem;
            margin-left: 0.5rem;
            margin-top: 4.7rem;
        }
        .d10{
            width: 14rem;
            height: 4rem;
            position: relative;
            margin-top: 0.22rem;
        }
        .img9{
            width: 14rem;
            height: 4rem;
        }
        .d003{
            width: 3.94rem;
	        height: 2.84rem;
            position: absolute;
            top: 0.64rem;
            left: 1.44rem;
        }
        .d006{
	        border: solid 0.04rem #ffffff;
        }
        .d004{
            width: 2.2rem;
	        height: 1.1rem;
	        font-family: PingFangSC-Thin;
	        font-size: 0.65rem;
	        font-weight: normal;
	        font-stretch: normal;
	        line-height: 0.6rem;
	        letter-spacing: 0.03rem;
	        color: #ffffff;
            margin-top: 0.4rem;
            margin-left: 0.38rem;
            opacity: 0.8;
        }
        .d005{
            width: 2.98rem;
	        height: 0.6rem;
	        font-family: PingFangSC-Regular;
	        font-size: 0.65rem;
	        font-weight: normal;
	        font-stretch: normal;
	        line-height: 0.6rem;
	        letter-spacing: 0.03rem;
	        color: #ffffff;
            margin-top: 0.3rem;
            margin-left: 0.38rem;
        }
        .d007{
            width: 2.2rem;
	        height: 1.1rem;
	        font-family: PingFangSC-Thin;
	        font-size: 0.65rem;
	        font-weight: normal;
	        font-stretch: normal;
	        line-height: 0.6rem;
	        letter-spacing: 0.03rem;
	        color: #ffffff;
            margin-top: 0.5rem;
            margin-left: 0.38rem;
            opacity: 0.8;
        }
        .d008{
            width: 3.48rem;
	        height: 0.6rem;
	        font-family: PingFangSC-Regular;
	        font-size: 0.65rem;
	        font-weight: normal;
	        font-stretch: normal;
	        line-height: 0.2rem;
	        letter-spacing: 0.03rem;
	        color: #ffffff;
            margin-left: 0.38rem;
        }

        .div7{
            width: 14rem;
            height: 14.14rem;
            overflow: hidden;
            margin-left: 0.5rem;
        }
        .d11{
            width: 6.88rem;
            height: 6.96rem;
            float: left;
            background-color: white;
        }
        .d009{
            margin-bottom: 0.22rem;
        }
        .d010{
            margin-right: 0.24rem;
        }
        .img10{
            width: 4rem;
            height: 4.16rem;
            margin-top: 0.54rem;
            margin-left: 1.56rem;
        }
        .img11{
            width: 4.36rem;
            height: 4.16rem;
            margin-top: 0.54rem;
            margin-left: 1.48rem;
        }
        .d12{
            width: 6.04rem;
	        height: 0.42rem;
	        font-family: STXihei;
	        font-size: 0.44rem;
	        font-weight: normal;
	        font-stretch: normal;
	        line-height: 0.4rem;
	        letter-spacing: 0rem;
	        color: #272727;
            margin-top: 0.42rem;
            margin-left: 0.44rem;
            white-space: nowrap;
            overflow:hidden;
            text-overflow: ellipsis;
        }
        .d13{
            width: 2.02rem;
	        height: 0.46rem;
	        font-family: STXihei;
	        font-size: 0.36rem;
	        font-weight: normal;
	        font-stretch: normal;
	        line-height: 0.4rem;
	        letter-spacing: 0rem;
	        color: #b91b34;
            margin-top: 0.4rem;
            margin-left: 0.42rem;
        }

        .div8{
            width: 15rem;
            height: 1.96rem;
            margin-top: 0.25rem;
            position: relative;
            border-top: 1px solid rgb(233, 233, 233);
        }
        .img12{
            width: 1.36rem;
            height: 1.28rem;
            position: absolute;
            top: 0.28rem;
            left: 1rem;
        }
        .d14{
            width: 1.36rem;
	        height: 0.6rem;
	        font-family: PingFang-SC-Medium;
	        font-size: 0.5rem;
	        font-weight: normal;
	        font-stretch: normal;
	        line-height: 1.72rem;
	        letter-spacing: 0rem;
	        color: #b91b34;
            position: absolute;
            left: 1.16rem;
            bottom: 0.25rem;
        }

        .img13{
            width: 1.36rem;
            height: 1.28rem;
            position: absolute;
            top: 0.28rem;
            left: 4.8rem;
        }
        .d16{
            width: 1.36rem;
	        height: 0.68rem;
	        font-family: PingFang-SC-Medium;
	        font-size: 0.5rem;
	        font-weight: normal;
	        font-stretch: normal;
	        line-height: 1.72rem;
	        letter-spacing: 0rem;
	        color: #7c8188;
            position: absolute;
            left: 5rem;
            bottom: 0.20rem;
        }

        .img15{
            width: 1.36rem;
            height: 1.28rem;
            position: absolute;
            top: 0.28rem;
            left: 8.74rem;
        }
        .d17{
            width: 1.88rem;
	        height: 0.6rem;
	        font-family: PingFang-SC-Medium;
	        font-size: 0.5rem;
	        font-weight: normal;
	        font-stretch: normal;
	        line-height: 1.72rem;
	        letter-spacing: 0rem;
	        color: #7c8188;
            position: absolute;
            left: 8.68rem;
            bottom: 0.25rem;
        }

        .img16{
            width: 1.36rem;
            height: 1.28rem;
            position: absolute;
            top: 0.28rem;
            right: 1.2rem;
        }
        .d18{
            width: 1.38rem;
	        height: 0.68rem;
	        font-family: PingFang-SC-Medium;
	        font-size: 0.5rem;
	        font-weight: normal;
	        font-stretch: normal;
	        line-height: 1.72rem;
	        letter-spacing: 0rem;
	        color: #7c8188;
            position: absolute;
            right: 1rem;
            bottom: 0.25rem;
        }
        
        /* @media  only screen and (min-width:374px) and  (max-width: 376px){
            html{
                font-size: 25px;
            }
        }
        @media  only screen and (min-width:319px) and  (max-width: 321px){
            html{
                font-size: 21.33px;
            }
        }
        @media  only screen and (min-width:413px) and  (max-width: 415px){
            html{
                font-size: 27.6px;
            }
        } */
    </style>
</head>
<body>
    <div class="box">
        <div class="div1">
            <img src="img/未标题-1 (3).png" alt="" class="img1">
            <div class="d1">
                <img src="img/fdj.png" alt="" class="img2">
                <span class="s1">拉菲</span>
            </div>
            <span class="s2">登录</span>
        </div>

        <img src="img/2.png" alt="" class="img3">

        <div class="content">

            <div class="div2">
                <div class="d2">
                    <img src="img/top.png" alt="" class="img5">
                    <div class="d002">每日推荐</div>
                </div>

                <div class="d2">
                    <img src="img/clock.png" alt="" class="img4">
                    <div class="d002">每日推荐</div>
                </div>
                <div class="d2">
                    <img src="img/new.png" alt="" class="img6">
                    <div class="d002">新品上架</div>
                </div>
                <div class="d2">
                    <img src="img/top.png" alt="" class="img5">
                    <div class="d002">热销推荐</div>
                </div>
            </div>

            <div class="div3">
                <div class="d3"></div>
                <div class="d4">活动精选</div>
                <div class="d3"></div>
            </div>

            <div class="div4">
                <img src="img/active1.png" alt="" class="img7">
                <div class="d5">国美酒节</div>
                <div class="d6">意大利名酒</div>
                <div class="d7">19.9元秒</div>
            </div>

            <div class="div5">
                <img src="img/active2.png" alt="" class="img8">
                <div class="d8">茅台红色限量版</div>
                <div class="d9">799元</div>
            </div>

            <div class="div6">
                <div class="d10">
                    <img src="img/activeBig1.png" alt="" class="img9">
                    <div class="d003 d006">
                        <div class="d004">
                            LES
                            <br>
                            CLANS
                        </div>
                        <div class="d005">清新 纯净</div>
                    </div>
                </div>
                <div class="d10">
                    <img src="img/activeBig2.png" alt="" class="img9">
                    <div class="d003">
                        <div class="d004">
                            LES
                            <br>
                            CLANS
                        </div>
                        <div class="d005">清新 纯净</div>
                    </div>
                </div>
                <div class="d10">
                    <img src="img/activeBig3.png" alt="" class="img9">
                    <div class="d003">
                        <div class="d007">
                            LAREINA
                        </div>
                        <div class="d008">艺术家最爱</div>
                    </div>
                </div>
                <div class="d10">
                    <img src="img/activeBig4.png" alt="" class="img9">
                    <div class="d003">
                        <div class="d007">
                            FRENCH
                        </div>
                        <div class="d008">法兰西之夜</div>
                    </div>
                </div>
                <div class="d10">
                    <img src="img/activeBig5.png" alt="" class="img9">
                    <div class="d003">
                        <div class="d007">
                            LAREINA
                        </div>
                        <div class="d008">艺术家最爱</div>
                    </div>
                </div>
            </div>

            <div class="div3">
                <div class="d3"></div>
                <div class="d4">为您推荐</div>
                <div class="d3"></div>
            </div>

            <div class="div7">
                <div class="d11 d009 d010">
                    <img src="img/recommend1.png" alt="" class="img10">
                    <div class="d12">澳洲原瓶进口红酒洛神山庄干红葡萄酒</div>
                    <div class="d13">￥318.00</div>
                </div>
                <div class="d11 d009">
                    <img src="img/recommend2.png" alt="" class="img11">
                    <div class="d12">澳大利亚原装进口红酒整箱六瓶装</div>
                    <div class="d13">￥278.00</div>
                </div>
                <div class="d11 d010">
                    <img src="img/recommend1.png" alt="" class="img10">
                    <div class="d12">澳洲原瓶进口红酒洛神山庄干红葡萄酒</div>
                    <div class="d13">￥318.00</div>
                </div>
                <div class="d11">
                    <img src="img/recommend2.png" alt="" class="img11">
                    <div class="d12">澳大利亚原装进口红酒整箱六瓶装</div>
                    <div class="d13">￥278.00</div>
                </div>
            </div>

            <div class="div8">
                <img src="img/home-2.png" alt="" class="img12">
                <div class="d14">首页</div>
                
                <img src="img/category-2.png" alt="" class="img13">
                <div class="d16">分类</div>

                <img src="img/cart.png" alt="" class="img15">
                <div class="d17">购物车</div>

                <img src="img/mine.png" alt="" class="img16">
                <div class="d18">我的</div>
            </div>

        </div>
    </div>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <script>

        function setHTML() {
            var baseVal = 50;
            var pageWidth = 750;
            var screenWidth = screen.width;
            var fz = screenWidth * baseVal / pageWidth;
            document.querySelector("html").style.fontSize = fz + "px";
        }
        window.onresize = function () {
            setHTML();
        }

        $(".img13").click(function(){
			window.location.href="分类.html";
		})

        $(".img15").click(function(){
			window.location.href="购物车.html";
		})

        $(".img16").click(function(){
			window.location.href="我的.html";
		})
    </script>
</body>
</html>